<template>
  <div class="room frame_content ">
    <h4 style="margin-left: 20px">编辑客服</h4>
    <table class="common">
      <tbody>
        <tr>
          <td class="tableleft">客服QQ</td>
          <td>
            <input type="text" class="qqKf" name="QQ" v-model="edit_room_configuration.qq_service" />
          </td>
          <td class="tableleft">客服微信</td>
          <td>
            <input type="text" class="wxKf" name="WeiXin" v-model="edit_room_configuration.wx_service" />
          </td>
        </tr>
        <tr>
          <td colspan="8">
            <a href="javascript:void(0);" class="btn btn-primary btm saveKfBtn" v-on:click="sumit_service()"
              >保存</a
            >
          </td>
        </tr>
      </tbody>
    </table>
    <h4 style="margin-left: 20px">在线人数设置</h4>
    <table class="common">
      <tbody>
        <tr>
          <td class="tableleft" style="width: 15%">添加人数</td>
          <td colspan="5">
            <input
              type="text"
              id="roomUserCount"
              onkeyup="this.value=this.value.replace(/[^\d.]/g,'')"
              v-model="room_admin.add_online_num"
            />
            （最多设置100人）
          </td>
        </tr>
        <tr>
          <td colspan="8">
            <a
              href="javascript:void(0);"
              class="btn btn-primary btm saveUserCountBtn" v-on:click="sumit_add_online_num()"
              >设置</a
            >
          </td>
        </tr>
      </tbody>
    </table>


    <!-- <h4 style="margin-left: 20px">盘口列表</h4>
    <table class="common">
      <thead>
        <tr class="Handicap">
          <th>名称</th>
          <th>地址</th>
          <th>并发基数</th>
          <th>账号</th>
          <th>密码</th>
          <th>余额</th>
          <th>访问方式</th>
          <th>参数</th>
          <th>重试策略</th>
          <th>操作</th>
        </tr>
      </thead>
    <tbody>
        <tr v-for="(handicap,index) in handicaps" :key="index" class="Handicap">
          <td>{{ handicap.name}}</td>
          <td>{{ handicap.add}}</td>
          <td>{{ handicap.Cardinal_number}}</td>
          <td>{{ handicap.user}}</td>
          <td>{{ handicap.password}}</td>
          <td>{{handicap.over}}</td>
          <td>{{handicap.mode}}</td>
          <td>{{handicap.parameter}}</td>
          <td>{{handicap.strategy}}</td>
          <td>
          <input type="radio" name="series"/>
          启用
          <input type="radio" name="series"/>
          禁用
          </td>
        </tr>
      </tbody>
    </table>

    <h4 style="margin-left: 20px">盘口接口访问记录</h4>
    <table class="common">
      <thead>
        <tr class="Handicap">
          <th>名称</th>
          <th>地址</th>
          <th>并发基数</th>
          <th>参数</th>
          <th>结果</th>
          <th>时间</th>
          <th>错误信息</th>
          <th>类型</th>
        </tr>
      </thead>
    <tbody>
        <tr v-for="(recording,index) in recordings" :key="index" class="Handicap">
          <td>{{recording.name}}</td>
          <td>{{recording.add}}</td>
          <td>{{recording.Cardinal_number}}</td>
          <td>{{recording.parameter}}</td>
          <td>{{recording.result}}</td>
          <td>{{recording.time}}</td>
          <td>{{recording.error}}</td>
          <td>{{recording.type}}</td>
        </tr>
      </tbody>
    </table> -->
    
    <h4 style="margin-left: 20px">房间设置</h4>
    <table class="common">
      <tbody>
        <tr>
          <td class="tableleft">选择房间：</td>
          <td>
            <div class="three gameRadio">
              <label v-for="(item,index) in colors" v-on:click="change_room_configuration_edit(item.id)" :key="index">
                <input type="radio" name="series"  :checked="edit_room_configuration.id===item.id?'checked':''" />
                {{item.lottert_name}}
              </label>
            </div>
          </td>
        </tr>
        <tr>
          <td width="10%" class="tableleft">房间名称</td>
          <td>
            <input
              type="text"
              name="house_name"
              id="house_name"
              v-model="edit_room_configuration.game_name"
            />
          </td>
        </tr>
        <!-- <tr>
          <td class="tableleft">房间号码</td>
          <td>
            <input
              type="text"
              id="roomNum"
              onkeyup="this.value=this.value.replace(/\D/g,'')"
              maxlength="6"
              autocomplete="off"
              v-model="room_admin.room_num"
            />
            <span>房间号是进入房间的唯一途径</span>
          </td>
        </tr> -->
        <tr>
          <td class="tableleft">房间状态</td>
          <td>
            <input type="radio" name="is_open" value="1" class="roomSta" v-model="edit_room_configuration.status" />
            启用
            <input type="radio" name="is_open" value="2" class="roomSta" v-model="edit_room_configuration.status" />
            关闭
          </td>
        </tr>
        <tr>
          <td class="tableleft">进入房间最低金额</td>
          <td>
            <input
              type="text"
              id="minin"
              onkeyup="this.value=this.value.replace(/[^\d.]/g,'')"
              v-model="edit_room_configuration.show_min_amount"
            />
            <span>账户金额低于设置值无法进入房间</span>
          </td>
        </tr>
        <tr>
          <td class="tableleft" id="jisu">50秒后能否撤销</td>
          <td>
            <input type="radio" name="che" value="1" class="revoke" v-model="edit_room_configuration.is_cancel" />
            能
            <input type="radio" name="che" value="2" class="revoke" v-model="edit_room_configuration.is_cancel"  />
            否
          </td>
        </tr>
        <tr>
          <td class="tableleft" id="jisu">回水是否通知</td>
          <td>
            <input type="radio" name="back" value="1" class="rewardNot" v-model="edit_room_configuration.is_notice" />
            能
            <input type="radio" name="back" value="2" class="rewardNot" v-model="edit_room_configuration.is_notice"/>
            否
          </td>
        </tr>
        <tr>
          <td class="tableleft">查返回信息</td>
          <td>
            <input type="checkbox"  id="ji" value="1" v-model="edit_room_configuration.show_points"  />
            积分
            <input type="checkbox" id="win" value="1" v-model="edit_room_configuration.show_win_lose" />
            输赢
            <input type="checkbox" id="liu" value="1" v-model="edit_room_configuration.show_current_water" />
            流水
            <input type="checkbox" id="tou" value="1" v-model="edit_room_configuration.show_current_bets" />
            投注
            <input type="checkbox" id="yong" value="1" v-model="edit_room_configuration.show_use" />
            使用
          </td>
        </tr>
        <tr>
          <td class="tableleft">账单显示最低金额</td>
          <td>
            <input
              type="text"
              id="minmoney"
              onkeyup="this.value=this.value.replace(/\D/g,'')"
              v-model="edit_room_configuration.show_min_amount"
            />
            <span>账户金额低于设置值积分账单不显示</span>
          </td>
        </tr>
        <tr>
          <td class="tableleft" id="jisu">回水状态</td>
          <td>
            <input
              type="radio"
              name="rewardType"
              value="2"
              class="rTypeRadio"
              v-model="edit_room_configuration.automatic_return"
            />
            不回
            <input
              type="radio"
              name="rewardType"
              value="1"
              class="rTypeRadio"
              v-model="edit_room_configuration.automatic_return"
            />
            自动回水
          </td>
        </tr>
        <tr>
          <td class="tableleft" id="jisu">自动反水模式</td>
          <td>
            <input
              type="radio"
              name="rewardSelf"
              value="1"
              class="rSelfRadio"
              v-model="edit_room_configuration.automatic_return_mode"
            />
            流水模式
            <input
              type="radio"
              name="rewardSelf"
              value="1"
              class="rSelfRadio"
              v-model="edit_room_configuration.automatic_return_mode"
            />
            输赢模式
          </td>
        </tr>
        <tr>
          <td class="tableleft" id="jisu">账单</td>
          <td>
            <input type="radio" name="zhangdan" value="1" class="zdRadio" v-model="edit_room_configuration.paiban_mode" />
            单排
            <input type="radio" name="zhangdan" value="2" class="zdRadio" v-model="edit_room_configuration.paiban_mode" />
            双排
          </td>
        </tr>
        <tr class="long">
          <td class="tableleft">开和</td>
          <td>
            <input type="radio" name="long" value="1" class="kaihe" v-model="edit_room_configuration.pass_kill" />
            返还本金
            <input type="radio" name="long" value="2" class="kaihe" v-model="edit_room_configuration.pass_kill" />
            通杀龙虎
          </td>
        </tr>
        <tr>
          <td class="tableleft">房间代理账号</td>
          <td>
            <input type="text" id="username" readonly="readonly" v-model="edit_room_configuration.account_name"  />
            <span>为空则不绑定</span>
          </td>
        </tr>
        <tr>
          <td class="tableleft">房间代理密码</td>
          <td>
            <input type="text" id="agentpwd" v-model="edit_room_configuration.room_agent_password" />
            <span>输入则修改</span>
          </td>
        </tr>
        <tr>
          <td class="tableleft"></td>
          <td>
            <a href="javascript:void(0);" class="btn btn-primary" v-on:click="sumit_room_configuration()">保存1</a>
          </td>
        </tr>
      </tbody>
    </table>
    <h4 style="margin-left: 20px">上分账户</h4>
    <table class="common cent" style="margin-bottom: 40px">
      <thead>
        <tr>
          <th>帐号类型</th>
          <th>收款帐号</th>
          <th>二维码</th>
          <th>管理操作</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>微信</td>
          <td class="wxAcc">{{edit_room_configuration.wx_receipt}}</td>
          <td>
            <img style="width:20px;height:20px" class="wxImg" :src="'/api/'+edit_room_configuration.wx_code" />
          </td>
          <td>
            <a href="javascript:void(0);" class="accEdit" v-on:click="edit_wx_dialog(edit_room_configuration.wx_receipt,edit_room_configuration.wx_code)">修改</a>
          </td>
        </tr>
        <tr>
          <td>支付宝</td>
          <td class="zfbAcc">{{edit_room_configuration.alipay_receipt}}</td>
          <td>
            <img style="width:20px;height:20px" class="zfbImg" :src="'/api/'+edit_room_configuration.alipay_code" />
          </td>
          <td>
            <a href="javascript:void(0);" class="accEdit" btntype="zfb" v-on:click="edit_alipay_dialog(edit_room_configuration.alipay_receipt,edit_room_configuration.alipay_code)" >修改1</a>
          </td>
        </tr>
      </tbody>
    </table>
    <div id="mask" style="left: 50%;right: 50%" class="mask" v-if="edit_dialog.display">
      <div class="mask1">
        <span class="closeBtn" v-on:click="close_edit_dialog()">X</span>
        <div class="content" id="content">
          <table paytype="1">
            <tbody>
              <tr>
                <td>帐号类型</td>
                <td>
                  <input
                    type="text"
                    name="AccountType"
                    :value="edit_dialog_type_name(edit_dialog.type)"
                    disabled="disabled"
                  />
                </td>
              </tr>
              <tr>
                <td>收款帐号</td>
                <td>
                  <input type="text" name="Account" class="accInput" v-model="edit_dialog.receipt" />
                </td>
              </tr>
              <tr>
                <td>收款图片</td>
                <td>
                  <el-upload
                          class="avatar-uploader"
                          :action="'api/login/room_admin/upload/token/'+token"
                          :show-file-list="false"
                          :on-success="handleAvatarSuccess"
                          :before-upload="beforeAvatarUpload">
                    <img v-if="edit_dialog.code" :src="'/api'+edit_dialog.code" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon" ></i>
                  </el-upload>
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <a href="JavaScript:void(0);" class="btn btn-info " v-on:click="sumit_edit_dialog()">提交</a>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import http from "@/utils/http";
  export default {
    data(){
      return {
        token:"",
        room_admin:{
          qq_service:"",
          wx_service:"",
          add_online_num:0,
          wx_receipt:"",
          wx_code:"",
          alipay_receipt:"",
          alipay_code:""
        },
        room_configuration:{},//财主
        colors:[],
        color:"",
        handicaps:[
          {
            name:'张三',
            add:'坂田',
            Cardinal_number:'123',
            user:'admin',
            password:'123456',
            over:'1200.00',
            mode:'在线发牌',
            parameter:'1',
            strategy:'(失败更换其它盘口，失败重复当前盘口)',
            Disable:'禁用'
          }
        ],
        recordings:[
          {
            name:'张三',
            add:'坂田',
            Cardinal_number:'123',
            result:'中奖了',
            time:'12:00',
            parameter:'1',
            error:'网络异常',
            type:'登录'
        }
            
        ],
        edit_room_configuration:{},//房间设置的信息
        account:{},
        edit_dialog:{
          display:false,
          type:"alipay",
          name:{
            alipay:"支付宝",
            wx:"微信"
          },
          wx_name:"",
          receipt:'',
          code:""
        }
      };
    },
    methods: {
      //上传图片
      handleAvatarSuccess(res,file) {
        console.log(res,'res')
        this.edit_dialog.code= res.url;
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      edit_dialog_type_name(type){
        if(type=="wx"){
          return this.edit_dialog.name.wx;
        }else{
          return this.edit_dialog.name.alipay;
        }
      },
      edit_wx_dialog(a,b){//微信
        
        this.edit_dialog.display = true;
        this.edit_dialog.type = "wx";
        this.edit_dialog.name.alipay = "支付宝";
        this.edit_dialog.name.wx = "微信";
        this.edit_dialog.receipt = a;
        this.edit_dialog.code = b;
      },
      edit_alipay_dialog(a,b){//支付宝
        this.edit_dialog.display = true;
        this.edit_dialog.type = "alipay";
        this.edit_dialog.name.alipay = "支付宝";
        this.edit_dialog.name.wx = "微信";
        this.edit_dialog.receipt = a;
        this.edit_dialog.code = b;
      },
      close_edit_dialog(){
        this.edit_dialog.display=false;
      },
      sumit_edit_dialog(){//提交账号图片
        let account=JSON.parse(localStorage.getItem("account"))
        let data={};
        let token=sessionStorage.getItem('token');
        data.account_id=account.account_id
        if(this.edit_dialog.type=='wx'){
          data.wx_receipt=this.edit_dialog.receipt
          data.wx_code=this.edit_dialog.code
        }else{
          data.alipay_receipt=this.edit_dialog.receipt
          data.alipay_code=this.edit_dialog.code
        }
        http.post(
            `/api/login/agent/edit_money?token=${token}`,data
          )
          .then(response => {
            console.log(response)
            if(response.data.status){
              this.init_room_configuration();
              this.edit_dialog.display=false
            }
          });
      },
      sumit_service(){//编辑客户保存
        // let account=JSON.parse(localStorage.getItem("account"));
        let token=sessionStorage.getItem('token');
        let data={};
        // data.account_id=account.account_id
        data.qq_service=this.edit_room_configuration.qq_service;
        data.wx_service=this.edit_room_configuration.wx_service;
        http.post(
          `/api/login/agent/edit_service?token=${token}`,data
        )
          .then(response => {
            console.log(response,'response');
            this.edit_dialog.display=false
          });

      },
      sumit_add_online_num(){
        let account=JSON.parse(localStorage.getItem("account"));
        let token=sessionStorage.getItem('token');
        let data={};
        data.account_id=account.account_id
        data.add_online_num=this.room_admin.add_online_num
        http.post(
          `/api/login/room_admin/edit?token=${token}`,data
        )
          .then(response => {
            console.log(response.data);
            this.edit_dialog.display=false
            // this.init_account()
          });

      },
      // init_account(){
      //   var account=JSON.parse(localStorage.getItem("account"));
      //   let token =sessionStorage.getItem('token');
      //   this.account=account
      //   console.log(account)
      //   http
      //     .post(
      //       `/api/login/room_admin/info?token=${token}`,
      //       {
      //         account_id:account.account_id
      //       }
      //     )
      //     .then(response => {
      //       console.log(response,'responseresponseresponseresponseresponse');
      //       // this.room_admin=response.data.data;
      //       // this.edit_room_configuration.room_num=this.room_admin.room_num;
      //     });
      // },
      init_room_configuration(){
        var lotterys=JSON.parse(localStorage.getItem("lottery"));
        this.colors=lotterys;
        let lottery=this.color;
        let token=sessionStorage.getItem("token");
        http
          .post(
            `/api/login/agent/room_configuration?token=${token}&lottery=${lottery}`,
          )
          .then(response => {
            console.log(response,"+++++++++++++++++++++++++++++++++++++++++++++++++++++++++");
            this.edit_room_configuration=response.data.res;
          });
      },
      change_room_configuration_edit(id){//点击单选按钮选择财主
        // console.log(id,'id');
        this.color=id;
        this.init_room_configuration();
      },
      sumit_room_configuration(){//保存房间信息
        var token=sessionStorage.getItem("token");
        var id=this.color;
        console.log(this.edit_room_configuration,'455555555555555555555555555555555555555');
        var data=this.edit_room_configuration;
        data.room_num=this.room_admin.room_num;
        http
          .post(
            `/api/login/agent/agent_room_edit?token=${token}&id=${id}`,
            data
          )
          .then(response => {
            console.log(response,"response++++++++++++++++++++++");
            this.init_account()
          });
      }
    },
    created() {
      // this.init_account();
      this.init_room_configuration();
      let token=sessionStorage.getItem('token');
      this.token=token;
    }
  };
</script>

<style>
.Handicap >th{
  text-align: center;
}
.Handicap >tr{
  text-align: center;
}
.Handicap >td{
  text-align: center;
}
.room {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding-bottom: 40px;
}
.room h4 {
  margin: 10px 0;
  font-family: inherit;
  font-weight: bold;
  line-height: 20px;
  color: inherit;
  text-rendering: optimizelegibility;
  font-size: 17.5px;
}
.btm {
  width: 120px;
}
.room table tbody tr:nth-child(even) {
  background: #f2f2f2;
}
.btn-primary {
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #006dcc;
  background-image: linear-gradient(to bottom, #08c, #04c);
  background-repeat: repeat-x;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 1px 2px rgba(0, 0, 0, 0.05);
}
.room a {
  text-decoration: none;
}
.common thead:first-child tr:first-child th {
  border-top: 0;
}
table.cent th,
table.cent td {
  text-align: center;
}
.common th {
  background-color: #eaeaea;
  font-weight: bold;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px !important;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
